import React, { Component } from 'react'
import PersonalListcss from './PersonalList.module.css'
import axios from 'axios'

export default class PersonalList extends Component {
  
  state = {
    persons:[],
  }

 componentDidMount (){
   this.HandleCheckAll();
  }

  // componentDidUpdate (){
  //   this.HandleCheckAll();
  // }

  HandleCheckAll(){
    axios.get('/PersonalList/user/getAllUser/1/20').then(
			response => {console.log('成功了',response.data.data.list);
				this.setState({persons:response.data.data.list})
		},
			error => {console.log('失败了',error);}
		)
  }

  Personsearch = () =>{
    const {queryIDElement:{value:queryStuID}} = this
    console.log(queryStuID)
     axios.get('/PersonalList/user/getSingleUserByXue/'+queryStuID).then(
      response => {console.log('成功了',response.data.data);
      // let a = []
      // a.push(response.data.data)
				this.setState({persons:response.data.data})
        console.log(queryStuID)
		},
			error => {console.log('失败了',error);}
    )
  }

  handleDeletePerson = (id) =>{
    let deleteId = id;
    axios.delete('/PersonalList/user/deleteUser/'+deleteId).then((response)=>{
      let persons = response.data;
      if (persons.status === 200){
        this.HandleCheckAll();
        alert("删除成功!")
      }
      else{
        alert("删除失败!")
      }
    })
  }

  EnterAdd = () =>{
    let history = this.props.history;
    history.push('/Sidebar/PersonalAdd')
  }

  EnterCheck = (id) =>{
    let history = this.props.history;
    history.push(`/Sidebar/PersonalFiles/${id}`)
  }

  EnterEdit = (id) =>{
    let history = this.props.history;
    history.push(`/Sidebar/PersonalEdit/${id}`)
  }

  render() {
    const {persons} = this.state
    console.log(persons)
    return (
      <div>
        <table width="50%" className={PersonalListcss.table}>
          <caption>
            <h2>
              老师/学生电子档案
            </h2>
            <button className="btn btn-primary btn-sm" type='button' onClick={this.EnterAdd}>新增</button>
          </caption>
          <div className={PersonalListcss.search}>
            <div className={PersonalListcss.inputfrom}>
              <input placeholder="请输入学号/教工号" type="text" ref={c => this.queryIDElement = c}/>
              <button onClick={this.Personsearch}></button>
            </div>
          </div>
          <thead>
            <tr>
              <th>学号/教工号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>学院</th>
              <th>身份</th>
              <th>操作</th>
            </tr>
          </thead>
          {persons?.map((person)=>(
          <tr key={person.id}>
            <td>{person.stuID}</td>
            <td>{person.name}</td>
            <td>{person.age}</td>
            <td>{person.college}</td>
            <td>{person.status}</td>
            <td>
              <div className="btn-group" role="group">
              <button type="button" className="btn btn-info btn-sm" onClick={() =>this.EnterCheck(person.id)}>查看</button>
                <button type="button" className="btn btn-success btn-sm" onClick={() =>this.EnterEdit(person.id)}>修改</button>
                <button type="button" className="btn btn-danger btn-sm" onClick={() => this.handleDeletePerson(person.id)}>删除</button>
              </div>
            </td>
          </tr>)
          )}
        </table>
      </div>
    )
  }
}
